<template>
  <div style="background:#fff;border-radius:10px;margin-top:10px;margin-bottom:10px">
    <div class="sk"><span>猜你喜欢</span> </div>
    <div class="nien">
      <div class="hua">
        <div @click="jump(v)" v-for="(v,index) in arr" :key="index"><img :src="v.img1" alt=""><span
            class="abbb">{{ v.proname }}</span>
          <p><span class="asa">￥</span><span class="la">{{ v.originprice }}</span><span class="asa">.00</span></p>
        </div>
      </div>
      <div class="hua">
        <div @click="jump(v)" v-for="(v, index) in arr" :key="index"><img :src="v.img2" alt=""><span
            class="abbb">{{ v.proname }}</span>
          <p><span class="asa">￥</span><span class="la">{{ v.originprice }}</span><span class="asa">.00</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: []
    }
  },
  methods: {
    jump(v) {
      console.log(v.proid);
      
      if (this.$count[0]) {
        this.$router.push({
          path: "/ProductDetails1",
          query: {
            proid: v.proid
          }
        })
      }else{
        this.$router.push({
          path:"/ProductDetails",
          query:{
            proid : v.proid
          }
        })
      }
      this.$count[0] = !this.$count[0] 
    }
  },
  mounted() {
    this.$http({
      url: "api/pro/list", // 设置请求的地址
      method: "GET", // 设置请求方法
    }).then((res) => {
      // res为后端返回的数据
      res.data.data.forEach((element) => {
        this.arr.push(element);
      });
    });
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.sk {
  background-color: #fff;
  color: #262626;
  font-size: 15px;
  font-weight: 700;
  height: 45px;
  line-height: 45px;
  padding-left: 3vw;
  margin-left: 3vw;
  /* display: inline-block; */
  /* position: relative; */
  /* z-index: 1 */
}

.nien {
  margin-top: 1.33333333vw;
  overflow: auto;
  padding-bottom: 2.66666667vw;
  padding-left: 3vw;
}

::-webkit-scrollbar {
  display: none;
}

.nien .hua {
  width: 250%;
  display: flex;
}

.nien .hua div {
  width: 25vw;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  float: left;
}

.nien div img {
  width: 11.2vw;
  height: 11.2vw;
  margin-top: 0.8vw;
  margin-bottom: 0.8vw;
}

.nien div .abbb {
  font-size: 3.2vw;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 20vw;
}

.asa {
  font-size: 12px;
  color: #f2270c;
}

.la {
  font-size: 16px;
  color: #f2270c;
}
</style>